<template>
  <el-card style="margin-top: 30px;">
    <div slot="header">
      <span>CPU</span>
    </div>
    <div class="el-table el-table--enable-row-hover el-table--medium" v-if="Object.keys(dataSource).length > 0">
      <table cellspacing="0" style="width: 100%;">
        <thead>
        <tr>
          <th class="is-leaf"><div class="cell">属性</div></th>
          <th class="is-leaf"><div class="cell">值</div></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><div class="cell">核心数</div></td>
          <td><div class="cell">{{ dataSource.cpuNum }}</div></td>
        </tr>
        <tr>
          <td><div class="cell">用户使用率</div></td>
          <td><div class="cell">{{ dataSource.used }}%</div></td>
        </tr>
        <tr>
          <td><div class="cell">系统使用率</div></td>
          <td><div class="cell">{{ dataSource.sys }}%</div></td>
        </tr>
        <tr>
          <td><div class="cell">当前空闲率</div></td>
          <td><div class="cell">{{ dataSource.free }}%</div></td>
        </tr>
        </tbody>
      </table>
    </div>
    <a-empty class="empty" description="暂无数据" v-else/>
  </el-card>
</template>

<script>
  export default {
    name: "CpuCard",
    props: {
      dataSource: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .empty{
    padding: 25px 0px;
  }
</style>

